<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
<style type="text/css" id = "css">
	*{
				margin: 0;
				padding: 0;
		}
		#banner{
				position: relative;
				width: 800px;
				height: 360px;
				margin: 100px auto;
				border: 1px solid #000;
		}
		#pic{
				width: 800px;
				height: 360px;
				perspective: 2500px;/*景深*/
		}
		#pic ul li {
				position:relative;
				float: left;
				height: 360px;
				list-style: none;
				transform-style: preserve-3d;/*构建3D场景*/
				transition: 0.5s;/*过度所用的时间*/
				transform:translateZ(-180px);
		}
		#pic ul li div{
				position: absolute;
				left: 0;
				bottom: 0;
				height: 360px;
		}
		#pic ul li div:nth-child(1){
				background: url("images/1.png");
				top: -360px;
				transform-origin: bottom; /*旋转轴心*/
				transform:translateZ(180px) rotateX(90deg);/*旋转角度*/
		}
		#pic ul li div:nth-child(2){
				background: url("images/2.png");
				top: 360px;
				transform-origin: top; /*旋转轴心*/
				transform:translateZ(180px) rotateX(-90deg);/*旋转角度*/
		}
		#pic ul li div:nth-child(3){
				/* transform: */
				background: url("images/3.png");
				transform:translateZ(180px);
		}
		#pic ul li div:nth-child(4){
				background: url("images/5.jpg");
				transform: translateZ(-180px);

		}
		#tab{
				position: absolute;
				right: 10px;
				bottom: 10px;
				width: 100px;
				height: 20px
		}
		#tab ul li{
				float:left;
				width: 20px;
				height: 20px;
				cursor: pointer;
				list-style: none;
				background-color: #999;
				border-radius: 50%;
				text-align: center;
				margin: 0 2px;
				font-size: 14px;
				line-height: 20px;
				color: #fff;
				font-weight: bold;
		}
		#tab ul li.on{
				background-color: #ffcc66;
		}
</style>
 <body>
  <div id="banner">
			<div id="pic">
					<ul>
					</ul>
			</div>
			<div id="tab">
				<ul>
					<li class="on">1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</div>
		</div>
 </body>
 <script type="text/javascript">
 <!---->
	var oul = document.getElementById('pic').childNodes[1],
		  ocss = document.getElementById('css'),
		  tabLi = document.getElementById('tab').getElementsByTagName('li')
		  oli = document.getElementById('pic').getElementsByTagName('li');
		  

	playBanner(16);
	
	function playBanner(x){
			var width = 800 / x;//获取单个li的宽度
			var bgposition = "",zindex = "",z = 0,liTran;
			for ( i  = 0; i < x ; i++)
			{
					if( i > x/2){
							z--;
							zindex += "#pic ul li:nth-child("+(i+1)+"){ z-index:"+z+"}"
					}
					oul.innerHTML += "<li><div></div><div></div><div></div><div></div></li>"
					bgposition += "#pic ul li:nth-child("+(i+1)+") div{ background-position-x: "+-width*i+"px}";
					liTran += "#pic ul li:nth-child("+(i+1)+"){ transition:"+(0.1*i)+"s}"
			}
			ocss.innerHTML += "#pic div,#pic li{ width: "+width+"px}"+bgposition+zindex+liTran;
	}
	for ( var i=0 ; i < tabLi.length ; i++ )
			{ 
				(function (i){
					tabLi[i].onclick = function(){
						for ( var j=0 ; j < tabLi.length ; j++ )
						{
							tabLi[j].className = "";
						}
						this.className = "on";
						ocss.innerHTML += "#pic ul li{ transform: translateZ(-180px) rotateX("+-i*90+"deg)}";
					}
				})(i)
					
			}
			/*
				解决for循环声明的值的保存问题
					1.自定义属性 tabLi[i].index = i;  然后用this.index去取当前i的值
					2.闭包
					3.ES6中的let(可能有兼容问题)
			*/
 </script>
</html>
